<template>
  <div>
    <div>
      <el-container>
        <el-aside :width="asideWidth" style="min-height: 100vh; background-color: #001529">

          <div style="height: 60px; color: white; display: flex; align-items: center; justify-content: center">
            <img src="@/assets/yuan.png" alt="" style="width: 40px; height: 40px">
            <span class="logo-title" v-show="!isCollapse">管理员</span>
          </div>
          <el-menu :collapse="isCollapse" :collapse-transition="false" router background-color="#001529"
                   text-color="rgba(255,255,255,0.65)" active-text-color="#fff" style="border: none"
                   :default-active="$route.path">
            <el-menu-item index="/manage/manageHome">
              <i class="el-icon-s-home"></i><span slot="title">首页</span>
            </el-menu-item>

            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-s-help"></i>
                <span slot="title">活动管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/manage/hotelactive">活动酒店审核</el-menu-item>
                <el-menu-item index="/manage/activeList">查看参与酒店</el-menu-item>
                <el-menu-item index="/manage/useractive">查看参与用户</el-menu-item>
                <el-menu-item index="/manage/number">统计参与数量</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span slot="title">商家管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/manage/hotelApply">酒店审核</el-menu-item>
                <el-menu-item index="/manage/businessManage">房间审核</el-menu-item>
                <el-menu-item index="/manage/hotelDetailList">酒店详情</el-menu-item>
                <el-menu-item index="/manage/recommend">首页推荐</el-menu-item>
                <el-menu-item index="/manage/orders">酒店订单</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-s-data"></i>
                <span slot="title">用户管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/manage/userList">用户信息管理</el-menu-item>
                <el-menu-item index="/manage/evaluateManage">用户评价管理</el-menu-item>
                <el-menu-item index="/manage/userMoney">用户余额明细</el-menu-item>
                <el-menu-item index="/manage/userPoints">用户积分明细</el-menu-item>
                <el-menu-item index="/manage/userCoupons">用户优惠券</el-menu-item>
                <el-menu-item index="/manage/userSaves">用户收藏</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-s-goods"></i>
                <span slot="title">优惠券设置</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/manage/coupon">添加优惠券</el-menu-item>
                <el-menu-item index="/manage/unusableCoupons">已废弃优惠券</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-s-marketing"></i>
                <span slot="title">统计</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/manage/income">酒店日收入</el-menu-item>
                <el-menu-item index="/manage/registerCount">用户日注册数</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item @click="logout">
              <i class="el-icon-s-grid"></i><span slot="title">退出登录</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <el-header>
            <i :class="collapseIcon" style="font-size: 26px;margin-right: -8px" @click="handleCollapse"></i>
            <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px">
              <el-breadcrumb-item :to="{ path: '/manage/manageHome' }">主页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: $route.path }">{{ $route.meta.name }}</el-breadcrumb-item>
            </el-breadcrumb>
            <div
                style="flex: 1;width: 0;display: flex;align-items: center;justify-content: flex-end;margin-right: 30px">
            </div>
          </el-header>
          <el-main> <!--main界面-->
            <div>
              <router-view/>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: 'manage',
  data() {
    return {
      isCollapse: false,  // 不收缩
      asideWidth: '200px',//侧边栏宽
      collapseIcon: 'el-icon-s-fold',
      User: [],
      user: JSON.parse(localStorage.getItem('user') || '{}'),
      url: '',
      urls: []
    }
  },
  mounted() { //页面加载完之后触发
    // if (!this.user.id) {
    //   this.$router.push('/login')
    // }
  },
  methods: {
    updateUser(user) { //获取子组件传过来的数据 更新当前的数据
      this.user = user;
    },
    logout() {
      this.$router.push('/userHome')
      localStorage.removeItem('user')//清除当前的token和用户数据
      this.$message.success("退出成功")
    },
    handleFull() {
      document.documentElement.requestFullscreen()
    },
    handleCollapse() {
      this.isCollapse = !this.isCollapse
      this.asideWidth = this.isCollapse ? '64px' : '200px'
      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
    },
  }
}
</script>

<style>
.el-submenu__title {
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 25px !important;
  transition: color 0s;
}

.el-menu-item {
  min-width: 0 !important;
  width: calc(100% - 10px);
  margin: 5px;
  height: 40px !important;
  line-height: 40px !important;
  border-radius: 5px;
}

.el-menu--inline {
  background-color: #000c17 !important;
}

.el-menu--inline .el-menu-item {
  background-color: #000c17 !important;
  padding-left: 49px !important;
}

.el-menu-item:hover, .el-submenu__title:hover {
  color: #fff !important;
}

.el-submenu__title:hover i {
  color: #fff !important;
}

.el-menu-item:hover i {
  color: #fff !important;
}

.el-menu-item.is-active {
  background-color: #1890ff !important;
  border-radius: 5px !important;
  width: calc(100% - 8px);
  margin-left: 4px;
}


.el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
}

.el-submenu__title {
  height: 40px !important;
  line-height: 40px !important;
}

.el-submenu .el-menu-item {
  min-width: 0 !important;
}

.el-menu--inline .el-menu-item.is-active {
  padding-left: 45px !important;
}

/*.el-submenu__icon-arrow {  下拉小箭头的位置设置   */
/*  margin-top: -5px;*/
/*}*/
.el-aside {
  transition: width .3s;
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
}

.logo-title {
  margin-left: 5px;
  font-size: 20px;
  transition: all .3s; /* 0.3s */
}

.el-header {
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
  display: flex;
  align-items: center;
}

.custom-button {
  border: none;
}

.custom-button:hover {
  background-color: #ffffff;
}

.custom-button:active {
  color: #606266;
}

.custom-button:focus:not(:active) {
  background-color: #ffffff; /* 设置鼠标悬停时的背景颜色为白色 */
  color: #606266;
}

.text_color {
  color: #606266
}

.text_color:hover {
  color: #409EFF;
}
</style>